<template>
	<view class="goods-cards">
		<!-- 商品卡片 -->
		<view class="card-item" v-for="(item,index) in goods" :key="index">
			<!-- 卡片左侧 -->
			<view class="card-lef">
				<image class="card-img" :src="item.thumb" mode="aspectFill" />
			</view>
			<!-- 卡片右侧 -->
			<view class="card-rig">
				<view class="good-name">
					盲盒名称
				</view>
				<!-- 盲盒价格 -->
				<view class="good-price">
					￥<span class="pricedemo">39.00</span>
				</view>
				<view class="good-rest">
					该箱剩余{{item.num}}/132
				</view>
				<!-- 进度条 -->
				<view class="good-progress">
					<u-line-progress height="8" :activeColor="prgresscolor(item)" :percentage='item.progress'
						:showText="false" inactiveColor="gray">
					</u-line-progress>
				</view>
				<!-- 盲盒展示 -->
				<view class="good-show">

					<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" display-multiple-items='4'
						:duration="duration" circular="true">
						<swiper-item v-for="(item, index) in info" :key="index">
							<view  class="swiper-item">
								<image class="imaged" :src="item.url" mode="aspectFit" />
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图配置
				autoplay: true,
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长
				info: [{
						colorClass: 'uni-bg-red',
						url: this.imagesUrl('bluecar.png'),
						
					},
					{
						colorClass: 'uni-bg-green',
						url: this.imagesUrl('pinkdoll.png'),
						
					},
					{
						colorClass: 'uni-bg-blue',
						url: this.imagesUrl('bluecar.png'),
						
					},
					{
						colorClass: 'uni-bg-blue',
						url: this.imagesUrl('pinkdoll.png'),
						
					},
					{
						colorClass: 'uni-bg-blue',
						url: this.imagesUrl('bluecar.png'),
						
					},
					{
						colorClass: 'uni-bg-blue',
						url: this.imagesUrl('pinkdoll.png'),
						
					}
				],

				goods: [{
					thumb: this.imagesUrl('pinkdoll.png'),
					num: 40,
					progress: 60
				}, {
					thumb: this.imagesUrl('bluecar.png'),
					num: 100,
					progress: 90
				}, {
					thumb: this.imagesUrl('pinkdoll.png'),
					num: 60,
					progress: 20
				}, {
					thumb: this.imagesUrl('bluecar.png'),
					num: 10,
					progress: 40
				}, {
					thumb: this.imagesUrl('pinkdoll.png'),
					num: 130,
					progress: 70
				}, ]
			}
		},
		methods: {
			prgresscolor(item) {
				let progress = item.num / 132
				if (item.progress > 80) {
					return 'red'
				} else if (item.progress > 50) {
					return 'orangered'
				} else {
					return 'green'
				}
			},

		},
		computed: {

		},
		options: {
			styleIsolation: 'shared'
		}
	}
</script>

<style lang="scss" scoped>
	.goods-cards {
		margin-top: 40rpx;

		.card-item {
			border-radius: 15rpx;
			margin: 18rpx auto;

			color: white;
			width: 690rpx;
			height: 300rpx;
			background-color: rgb(29, 29, 29);
			display: flex;
			justify-content: left;
			align-items: center;

			.card-lef {
				width: 252rpx;
				height: 252rpx;
				overflow: hidden;
				margin: 0 24rpx;

				.card-img {
					width: 100%;
					height: 100%;
				}
			}

			.card-rig {
				width: 366rpx;
				height: 252rpx;
				display: flex;
				flex-direction: column;
				position: relative;

				.good-name {
					font-size: 28rpx;
					margin-bottom: 12rpx;
				}

				.good-price {
					font-size: 24rpx;
					margin-bottom: 12rpx;

					height: 40rpx;
					position: relative;

					.pricedemo {
						font-size: 32rpx;
					}
				}

				.good-rest {
					font-size: 20rpx;
					text-align: right;
				}

				.good-progress {
					height: 15rpx;
					margin: 12rpx 0;

					.good_rest_line {
						display: flex;

						.line_left {
							height: 8rpx;
							margin-top: 4rpx;
							border-radius: 4rpx;
							background: orangered;
						}

						.line_right {
							height: 8rpx;
							margin-top: 4rpx;
							border-top-right-radius: 4rpx;
							border-bottom-right-radius: 4rpx;
							background: gray;
						}
					}
				}

				.good-show {
					position: relative;

					.content {
						/* text-align: center; */
						height: 100vw;

					}

					.swiper-box {
						width: 376rpx;
						height: 84rpx;
					}

					.swiper-item {
						width: 84rpx;
						height: 84rpx;
						background-color: #999;
						border-radius: 8rpx;
						.imaged {
							width: 84rpx;
							height: 84rpx;
						}
					}
				}
			}

		}

	}
</style>